<template>

    <ResourceSearch />

    <CustomTable :columns="columns" :data="data" :current="pagination.page" :rows="pagination.rows" :total="pagination.total">

        <!-- 处理资源状态  1 代表 审核通过， 0 未审核， -1 审核失败 -->
        <template #status="{ row, index }">
            <DotTag type="default" v-if="row.del">已下架</DotTag>
            <DotTag type="success" v-else-if="row.state == 1">已通过</DotTag>
            <DotTag type="primary" v-else-if="row.state == 0">未审核</DotTag>
            <DotTag type="error" v-else>未通过</DotTag>
        </template>

        <!-- 处理动作 -->
        <template #action="{ row, index }">
            <Button type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="verifyComment(row)">审核</Button>
            <Button type="error" icon="ios-remove-circle-outline" size="small" @click="remove(row, index)">移除</Button>
        </template>

    </CustomTable>

    <VerifyWin v-model="drawer.state" v-if="drawer.state" :row="drawer.row" :width="420" @on-verify="verifyData">
        <template v-slot="{row}">
            <CommentDetail  :row="row" />
        </template>
    </VerifyWin>
    
</template>

<script setup>
import { ref, reactive, watch, onMounted} from 'vue'
import CustomTable from '../components/CustomTable.vue';
import DotTag from '../components/DotTag.vue'; 
import ResourceSearch from '../components/resource/CommentSearch.vue' ;
import CommentDetail from '../components/resource/CommentDetail.vue' ;
import VerifyWin from '../components/VerifyWin.vue' ;
import Tips from '../message'

// 获取 从路由中传入的绑定参数 
const props = defineProps(["state", "action"]) ; 

const drawer = ref({
    state: false,  
    row: {} , // 要审核的评论
})

const columns = reactive([
    {title: "资源名",key: "resourceName",width: 180},
    {title: "评论内容", key: "content"},
    {title: "评论人",key: "user",width: 100},
    {title: "评论时间",key: "createTime", width: 180, align: "center"},
    {title: "状态", slot: "status",width: 120, align: "center"},
    {title: "操作",slot: "action",width: 180, align: "center"},
]); 

// 当 审核不通过的时候，新增一列 (审核失败原因)， 如果在 router-view 中配置了 key, 可以使用 onMounted 替代 watch, 使用 watch 需要添加 immediate
onMounted(()=> {
    if (props.state == -1 && props.action === "notApproved") {
        let len = columns.length ; 
        columns.splice(len - 1, 0,  {title: "审核失败原因", key: "reason", width: 180})
    }else{
        // 找到 key = reason 的列，并删除 
        let index = columns.findIndex(col => col.key === "reason") ;
        if (index !=-1 ) columns.splice(index, 1) ;
    }
    // 根据状态 分页查询对应的资源数据
})


// 要修改 data, 可以通过 data.value = ...
const data = ref(reactive([
    { id: 1, resourceName: "MySQL从入门到精通",  content: "受到各方观点方法对付上的花费的时间和合适的价格的结果三个受到各方观点方法对付上的花费的时", user: 'love残夜', state: 0, reason: "", createTime: "2023-07-30 11:22:44" },
]));

// 定义分页对象
const pagination = ref({
    page: 1, rows: 10, total: 0
});



// 打开审核窗口
function verifyComment(row) {
    drawer.value.state = true ;
    drawer.value.row = row ;
}
// 资源下架
function remove(row, index) {
    Tips.confirm("您确定要移除该评论吗?").then(()=> {
         
    });
}

function verifyData(data) {
    console.log(data);
    Tips.success("操作成功");
    drawer.value.state = false; 
}
</script>
